<template>
  <div style="position: relative;">
    <Tabs class="_wz_main_wzTabs" ref="wzTabs" type="card" :animated="false" :value="navId" closable @on-tab-remove="handleTabRemove" @on-click="navClick">
      <TabPane v-for="(item, index) in listNav" :label="item.label" :key="item.data" :name="item.data" :closable="index!=0" v-if="item.show"></TabPane>
    </Tabs>
    <div class="_wz_main_wzTabs_operating">
      <Dropdown placement="bottom-start" @on-click="closeOperating">
      <span>
        <Icon type="ios-close-circle-outline"/>
      </span>
        <DropdownMenu slot="list">
          <DropdownItem name="closeAll">关闭全部</DropdownItem>
          <DropdownItem name="closeOther">关闭其它</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </div>
  </div>
</template>
<script>
export default {
  props: ["listNav", "navId"],
  data() {
    return {}
  },
  methods: {
    handleTabRemove(name) {//关闭
      var that = this;
      that.$emit("openNav", name)//关闭菜单 mian.vue 剔除数据
      that.navClick(that.$refs.wzTabs.activeKey)  //关闭当前 获取现在选中的页面 tabs
      //关闭时候清除当前vue页面   //https://www.jianshu.com/p/4b55d312d297
    },
    navClick(name) {//点击
      var that = this;
      that.$router.push({
        path: name
      })
      that.$emit("leftNavList", name)//获得top菜单name传main.vue
    },
    closeOperating(name) {
      var that = this;
      if (name == "closeAll") {//关闭全部
        that.navClick("home")  //关闭当前 获取现在选中的页面 tabs
        for (var i = 0; i < that.listNav.length; i++) {
          if (that.listNav[i].data != "home") {
            that.$emit("openNav", that.listNav[i].data)
          }
        }
      } else {//关闭其它
        for (var i = 0; i < that.listNav.length; i++) {
          if (that.listNav[i].data != "home" && that.listNav[i].data != that.navId) {
            that.$emit("openNav", that.listNav[i].data)
          }
        }
      }

    }
  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态

  },
  watch: {//监听
    navId: function (a, b) {
    }
  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
<style lang="less" scoped>
  ._wz_main_wzTabs {
    width: calc(100% - 32px);
  }

  ._wz_main_wzTabs .ivu-tabs-bar {
    margin-bottom: 0px;
  }

  ._wz_main_wzTabs_operating {
    margin-left: 20px;
    position: absolute;
    top: 0;
    width: 32px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    right: 0px;
    background: #f5f7f9;
    border-bottom: 1px solid #dcdee2;
    border-left: 1px solid #dcdee2;
    font-size: 20px;
  }

  .ivu-tabs-ink-bar {

  }

</style>
